﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日程</title>
    <link rel="stylesheet" type="text/css" href="~/Content/static/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/static/css/CY-style.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/static/css/iconfont.css" />
    <style>
        #clendar .layui-laydate-content {
            border: none;
        }
        #clendar #layui-laydate1,
        #clendar .laydate-theme-molv .layui-laydate-main,
        #clendar .laydate-theme-molv .layui-laydate-main .layui-laydate-content table {
            width: 100%;
        }

        #clendar #layui-laydate1 .layui-laydate-header {
            background-color: #fff;
        }

        #clendar .laydate-theme-molv .layui-laydate-header i,
        #clendar .laydate-theme-molv .layui-laydate-header span {
            font-size: 18px;
            font-weight: normal;
            color: black;
        }

        #clendar .laydate-set-ym span {
            cursor: default;
            pointer-events: none;
        }

        #clendar .layui-laydate-header i.laydate-next-y,
        #clendar .layui-laydate-header i.laydate-prev-y {
            display: none;
        }

        #clendar .layui-laydate-header i.laydate-prev-m {
            left: 15px;
        }

        #clendar .layui-laydate-header i.laydate-next-m {
            right: 15px;
        }

        .CY-today-cont-event-cont i.fa {
            margin-left: 5px;
            cursor: pointer;
        }

        .CY-today-cont-event-cont fa-question, .CY-today-cont-event-cont fa-check {
        }

        .oneDay {
            margin-bottom: 10px;
        }

        .CY-today-cont-event-cont.showDate {
            padding-left: 190px !important;
        }

        .title {
            display: inline;
        }

        .important .title {
            color: red;
        }

        .numPadding {
            padding: 0 2px;
        }

        .newTaskInput {
            position: fixed;
            bottom: 0;
            right: 0;
            padding: 5px 0;
            background-color: #eee;
        }

        .input-group {
            margin: 0 4px;
        }

        .newTaskInput .input-group-addon, .input-group-btn.left {
            width: 130px !important;
        }

        .left .btn-group button {
            width: 130px;
        }

        .stickInSimpleMode {
            display: inline !important;
        }

        .color_toolbar_icon {
            color: #3BBFFF;
        }

        .isImportant {
            color: #3BBFFF;
        }

        .left .caret {
            float: right;
            margin-top: 10px;
        }

        .modal {
            background: rgba(0,0,0,0.2);
        }
        .laydate-day-mark::after {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="CY-mainnav ng-scope">
        <h1 class="CY-pa">领导日程设置</h1>
        <div class="CY-header-search">
            <label>领导：</label>
            <select id="leaderList" class="selectpicker" style="padding:2px 4px;"></select>
        </div>
    </div>
    <div class="CY-main ng-scope">
        <div class="CY-childnav">
            <div class="CY-child-cont">
                <div class="CY-home-calendar" style="border:none;">
                    <div id="clendar"></div>
                </div>
            </div>
        </div>
        <div ui-view="" class="ng-scope">
            <div class="CY-cont ng-scope">
                <div class="oneDay ng-scope">
                    <!--今日安排-->
                    <div class="CY-today-titile" style="border-bottom: 2px solid #78c8e6;">
                        <span id="selectedDate"></span>
                        <span style="margin-left:10px;">共<span id="taskCount" class="numPadding"></span>条</span>
                    </div>
                    <div class="CY-today">

                    </div>
                </div>
                <div class="CY-cb"></div>
            </div>
            <div class="newTaskInput ng-scope">
                <div class="input-group input-group-lg">
                    <span class="input-group-btn left">
                        <div class="btn-group dropup dropdown">
                            <button id="current-date-button" type="button" class="btn btn-default btn-lg" style="padding: 11px 16px 10px;" aria-expanded="false">
                                8月22日
                            </button>
                        </div>
                    </span>
                    <input type="text" id="newTaskTitle" class="form-control ng-pristine ng-valid ng-touched" style="padding: 10px; border-left: 0;" placeholder="+ 新建日程或事项" focus-me="">
                    <span class="input-group-btn">
                        <button class="btn btn-info" type="button" id="newTaskBtn">记下</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade ng-isolate-scope in" style="z-index: 1050; display: none;">

    </div>
    <script src="~/Content/static/layui/layui.js"></script>
    <script type="text/javascript">
        var laydate;
        var $;
        var selectedDate = new Date();
        var selectedLeaderID = "";
        layui.use('laydate', function () {
            $ = layui.$;
            laydate = layui.laydate;
        });
        $('.modal').hide()
        function showModal() {
            $('.modal').show();
            $('.modal-md').hide();
            $('.modal-sm').show()
        }
        function cancel() {
            $('.modal').hide();
            $('.modal').empty();
        }
        // 获取领导列表
        getLeaders();
        // 获取领导列表
        function getLeaders() {
            $.ajax({
                url: '/Apps/Tiger/GroupCalendar/GetLeaders',
                type: 'GET',
                success: function (result) {
                    // 判断需求
                    if (result.Success == true) {
                        var currentDate = new Date();
                        var optionStr = "";
                        result.Data.relations.forEach(function (item, index) {
                            if (index == 0) {
                                selectedLeaderID = item.id;
                                optionStr += '<option selected="selected" value="' + item.id + '">' + item.name + '</option>';
                            } else {
                                optionStr += '<option value="' + item.id + '">' + item.name + '</option>';
                            }
                        });
                        $('#leaderList').append(optionStr);
                        $('#leaderList').change(function () {
                            $('#current-date-button').text((currentDate.getMonth() + 1) + "月" + currentDate.getDate() + "日");
                            selectedLeaderID = $(this).children('option:selected').val();
                            getLeaderSchedule(dateToYMD(currentDate), currentDate.getFullYear(), currentDate.getMonth() + 1, selectedLeaderID);
                            getLeaderTasks(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate(), selectedLeaderID)
                        });
                        $('#newTaskBtn').click(function () {
                            var inputTitle = $('#newTaskTitle').val();
                            if (inputTitle === undefined || inputTitle.length == 0) {
                                alert('请输入新建日程内容');
                                return;
                            } else {
                                NewTask(selectedDate, inputTitle, selectedLeaderID);
                            }
                        });

                        // 首次渲染获得对应的日历
                        $('#current-date-button').text((currentDate.getMonth() + 1) + "月" + currentDate.getDate() + "日");
                        getLeaderSchedule(dateToYMD(currentDate), currentDate.getFullYear(), currentDate.getMonth() + 1, selectedLeaderID);
                        getLeaderTasks(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate(), selectedLeaderID);
                    }
                    else {
                        alert(result.Message);
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
        // 获得领导月日程
        function getLeaderSchedule(value, year, month, emplID) {
            $('#selectedDate').text(value);
            $.ajax({
                url: '/Apps/Tiger/GroupCalendar?year=' + year + '&month=' + month + '&EmplID=' + emplID,
                type: 'GET',
                success: function (result) {
                    //执行一个laydate实例
                    $('#clendar').empty();
                    var laydateIns = laydate.render({
                        elem: '#clendar',
                        value: value,
                        position: 'static',
                        showBottom: false,
                        theme: '#079df2',
                        change: function (value, date, endDate) {
                            selectedDate = date;
                            $('#current-date-button').text(date.month + "月" + date.date + "日");
                            getLeaderSchedule(value, date.year, date.month, selectedLeaderID);
                            getLeaderTasks(date.year, date.month, date.date, selectedLeaderID);
                        },
                        mark: result.Data.mark
                    });
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
        // 获得领导任务列表
        function getLeaderTasks(year, month, day, emplID) {
            $.ajax({
                url: '/Apps/Tiger/GroupCalendar/GetByDate?year=' + year + '&month=' + month + '&day=' + day + '&emplId=' + emplID,
                type: 'GET',
                success: function (result) {
                    $('.CY-today').empty();
                    $('#taskCount').text(result.Data.tasks.length);
                    var taskStr = "";
                    var leftMargin = "";
                    result.Data.tasks.forEach(function (item) {
                        // 判断是否有提醒
                        var remindSign = null;
                        if (item.IsRemind) {
                            remindSign = '<a href="javascript:;" style="margin-right:20px"> \
                                            <i> \
                                                <i class="iconfont"></i> \
                                            </i> \
                                          </a>';
                            leftMargin = "40px";
                        } else {
                            remindSign = '';
                            leftMargin = "20px";
                        }
                        taskStr += '<div class="CY-today-cont  ng-scope CY_today_cont_sel"> \
                            <div class="CY-today-cont-event ng-scope"> \
                                <div class="CY-today-cont-event-time">' + remindSign + ' \
                                    <a href="javascript:;" class="ng-binding" onclick="showScheduleDialog(\'' + item.TaskID + '\',\'' + item.RemindTimeString + '\',\'' + item.StartTimeString + '\')"> \
                                        ' + item.StartTimeString + ' \
                                    </a> \
                                </div> \
                                <div class="CY-today-cont-event-cont limitedLengthHidden limitedLengthWrap" style="margin-left: '+ leftMargin + '"> \
                                    <div class="title ng-binding">'+ item.Title + '</div> \
                                </div> \
                                <div class="CY-today-cont-event-toolbtn-star"> \
                                    <span title="修改" onclick="showUpdateDialog(\'' + item.TaskID + '\',\'' + item.Title.replace(/\n/g, "\\n") + '\')"> \
                                        <i class="layui-icon">&#xe642;</i> \
                                    </span> \
                                    <span title="删除" onclick="showDeleteDialog(\'' + item.TaskID + '\',\'' + item.Title.replace(/\n/g, "\\n") + '\')"> \
                                        <i class="layui-icon">&#xe640;</i> \
                                    </span> \
                                </div> \
                            </div> \
                        </div>'
                    });
                    $('.CY-today').append(taskStr);
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
        // 添加领导任务
        function NewTask(date, title, emplID) {
            // 判断日期类型
            var startDate = "";
            var year = "";
            var month = "";
            var day = "";

            if (typeof date.getMonth === 'function') {
                startDate = dateToYMD(date);
                year = date.getFullYear();
                month = date.getMonth() + 1;
                day = date.getDate();
            } else {
                startDate = date.year + '-' + date.month + '-' + date.date;
                year = date.year;
                month = date.month;
                day = date.date;
            }
            $.ajax({
                url: '/Apps/Tiger/GroupCalendar/NewTask',
                type: 'POST',
                data: {
                    'startDate': startDate,
                    'title': title,
                    'emplID': emplID
                },
                success: function (result) {
                    // 清空日程输入框
                    $('#newTaskTitle').val("");
                    getLeaderTasks(year, month, day, selectedLeaderID);
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
        // 更新任务内容
        function confirmUpdate(taskId) {
            // 判断日期类型
            var startDate = "";
            var year = "";
            var month = "";
            var day = "";

            if (typeof selectedDate.getMonth === 'function') {
                year = selectedDate.getFullYear();
                month = selectedDate.getMonth() + 1;
                day = selectedDate.getDate();
            } else {
                year = selectedDate.year;
                month = selectedDate.month;
                day = selectedDate.date;
            }
            $.ajax({
                url: '/Apps/Tiger/GroupCalendar/UpdateTitle',
                type: 'POST',
                data: {
                    taskId: taskId,
                    newTitle: $('#newTitleTextarea').val()
                },
                success: function (result) {
                    cancel();
                    getLeaderTasks(year, month, day, selectedLeaderID);
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
        // 删除任务
        function confirmDelete(taskId) {
            // 判断日期类型
            var startDate = "";
            var year = "";
            var month = "";
            var day = "";

            if (typeof selectedDate.getMonth === 'function') {
                year = selectedDate.getFullYear();
                month = selectedDate.getMonth() + 1;
                day = selectedDate.getDate();
            } else {
                year = selectedDate.year;
                month = selectedDate.month;
                day = selectedDate.date;
            }
            $.ajax({
                url: '/Apps/Tiger/GroupCalendar/DeleteTask',
                type: 'POST',
                data: {
                    idList: taskId
                },
                success: function (result) {
                    cancel();
                    getLeaderTasks(year, month, day, selectedLeaderID);
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
        // 设置任务提醒
        function confirmSchedule(taskId) {
            // 判断日期类型
            var startDate = "";
            var year = "";
            var month = "";
            var day = "";

            if (typeof selectedDate.getMonth === 'function') {
                year = selectedDate.getFullYear();
                month = selectedDate.getMonth() + 1;
                day = selectedDate.getDate();
            } else {
                year = selectedDate.year;
                month = selectedDate.month;
                day = selectedDate.date;
            }
            // 获取时间
            var scheduleHour = $('#scheduleHour').children('option:selected').val();
            var scheduleMintue = $('#scheduleMinute').children('option:selected').val();

            // 判断设置的时间是否为空
            if (scheduleHour === undefined || scheduleHour.length == 0 || scheduleMintue === undefined || scheduleMintue.length == 0) {
                alert("开始时间不能为空");
                return;
            }
            // 设置时间
            $.ajax({
                url: '/Apps/Tiger/GroupCalendar/UpdateStartTime',
                type: 'POST',
                data: {
                    taskId: taskId,
                    hour: scheduleHour,
                    minute: scheduleMintue
                },
                success: function (result) {
                    // 设置提醒
                    var dayOffset = 0;
                    var hourOffset = 0;
                    var minuteOffset = 0;
                    var remindTime = $('#remindTime').children('option:selected').val();
                    // 判断时间
                    if (remindTime == "-1") {
                        // 不提醒
                        dayOffset = null;
                        hourOffset = null;
                        minuteOffset = null;
                    } else if (remindTime == 0) {
                        // 开始时
                        dayOffset = 0;
                        hourOffset = 0;
                        minuteOffset = 0;
                    } else if (remindTime == 1) {
                        // 开始前10分钟
                        minuteOffset = 10;
                    } else if (remindTime == 2) {
                        // 开始前20分钟
                        minuteOffset = 20;
                    } else if (remindTime == 3) {
                        // 开始前半小时
                        minuteOffset = 30;
                    } else if (remindTime == 4) {
                        // 开始前1小时
                        hourOffset = 1;
                    } else if (remindTime == 5) {
                        // 开始前2小时
                        hourOffset = 2;
                    } else if (remindTime == 6) {
                        // 开始前4小时
                        hourOffset = 4;
                    } else if (remindTime == 7) {
                        // 开始前8小时
                        hourOffset = 8;
                    } else if (remindTime == 8) {
                        // 开始前12小时
                        hourOffset = 12;
                    } else if (remindTime == 9) {
                        // 开始前1天
                        dayOffset = 1;
                    } else if (remindTime == 10) {
                        // 开始前2天
                        dayOffset = 2;
                    } else {
                        dayOffset = "";
                        hourOffset = "";
                        minuteOffset = "";
                    }
                    $.ajax({
                        url: '/Apps/Tiger/GroupCalendar/UpdateRemind',
                        type: 'POST',
                        data: {
                            taskId: taskId,
                            dayOffset: dayOffset,
                            hourOffset: hourOffset,
                            minuteOffset: minuteOffset
                        },
                        success: function (result) {
                            cancel();
                            getLeaderTasks(year, month, day, selectedLeaderID);
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
        // 弹出更新任务对话框
        function showUpdateDialog(TaskID, Title) {
            var dialog = '<div class="modal-dialog modal-md"> \
                            <div class="modal-content" uib-modal-transclude=""> \
                                <div class="modal-header ng-scope"> \
                                    <h3 class="modal-title">修改标题</h3> \
                                </div> \
                                <div class="modal-body ng-scope"> \
                                    <div class="form-group"> \
                                        <textarea id="newTitleTextarea" class="form-control ng-pristine ng-valid ng-touched" rows="3" focus-me="" placeholder="请输入日程名称">'+ Title + '</textarea> \
                                    </div> \
                                </div> \
                                <div class="modal-footer ng-scope"> \
                                    <button class="btn btn-default" type="button" onclick="confirmUpdate(\''+ TaskID + '\')">确定</button> \
                                    <button class="btn btn-default" type="button" onclick="cancel()">取消</button> \
                                </div> \
                            </div> \
                        </div>';
            $(dialog).appendTo('.modal').show();
            $('.modal').show();
            //$('.modal-md').show();
            //$('.modal-sm').hide();
        }
        // 弹出删除任务对话框
        function showDeleteDialog(TaskID, Title) {
            var dialog = '<div class="modal-dialog modal-md"> \
                            <div class="modal-content" uib-modal-transclude=""> \
                                <div class="modal-header ng-scope"> \
                                    <h3 class="modal-title">删除任务?</h3> \
                                </div> \
                                <div class="modal-body ng-scope"> \
                                    <div class="form-group"> \
                                        <p>'+ Title + '</p> \
                                    </div> \
                                </div> \
                                <div class="modal-footer ng-scope"> \
                                    <button class="btn btn-default" type="button" onclick="confirmDelete(\'' + TaskID + '\')">确定</button> \
                                    <button class="btn btn-default" type="button" onclick="cancel()">取消</button> \
                                </div> \
                            </div> \
                        </div>';
            $(dialog).appendTo('.modal').show();
            $('.modal').show();
            //$('.modal-md').show();
            //$('.modal-sm').hide();
        }
        // 弹出设置日程提醒对话框
        function showScheduleDialog(TaskID, remindStr, StartTimeString) {
            if (remindStr === undefined || remindStr === "null") {
                remindStr = "";
            }
            var dialog = '<div class="modal-dialog modal-sm"> \
                            <div class="modal-content" uib-modal-transclude=""> \
                                <div class="modal-header ng-scope"> \
                                    <h3 class="modal-title">设置时间和提醒</h3> \
                                </div> \
                                <div class="modal-body ng-scope"> \
                                    <div class="form-inline"> \
                                        <div class="form-group"> \
                                            <label>开始时间</label> \
                                            <select id="scheduleHour" class="form-control"><option value="" selected="selected"></option><option value="0" label="00">00</option><option value="1" label="01">01</option><option value="2" label="02">02</option><option value="3" label="03">03</option><option value="4" label="04">04</option><option value="5" label="05">05</option><option value="6" label="06">06</option><option value="7" label="07">07</option><option value="8" label="08">08</option><option value="9" label="09">09</option><option value="10" label="10">10</option><option value="11" label="11">11</option><option value="12" label="12">12</option><option value="13" label="13">13</option><option value="14" label="14">14</option><option value="15" label="15">15</option><option value="16" label="16">16</option><option value="17" label="17">17</option><option value="18" label="18">18</option><option value="19" label="19">19</option><option value="20" label="20">20</option><option value="21" label="21">21</option><option value="22" label="22">22</option><option value="23" label="23">23</option></select> \
                                            <label>：</label> \
                                            <select id="scheduleMinute" class="form-control"><option value="" selected="selected"></option><option value="0" label="00">00</option><option value="5" label="05">05</option><option value="10" label="10">10</option><option value="15" label="15">15</option><option value="20" label="20">20</option><option value="25" label="25">25</option><option value="30" label="30">30</option><option value="35" label="35">35</option><option value="40" label="40">40</option><option value="45" label="45">45</option><option value="50" label="50">50</option><option value="55" label="55">55</option></select> \
                                        </div> \
                                        <div class="form-group" style="margin:10px 0;"> \
                                            <label>提醒时间</label> \
                                            <select id="remindTime" class="form-control" style="width:145px;"><option value="-1" label="不提醒" selected="selected">不提醒</option><option value="0" label="开始时">开始时</option><option value="1" label="开始前10分钟">开始前10分钟</option><option value="2" label="开始前20分钟">开始前20分钟</option><option value="3" label="开始前半小时">开始前半小时</option><option value="4" label="开始前1小时">开始前1小时</option><option value="5" label="开始前2小时">开始前2小时</option><option value="6" label="开始前4小时">开始前4小时</option><option value="7" label="开始前8小时">开始前8小时</option><option value="8" label="开始前12小时">开始前12小时</option><option value="9" label="开始前1天">开始前1天</option><option value="10" label="开始前2天">开始前2天</option></select> \
                                        </div> \
                                        <div class="ng-binding">'+ remindStr + '</div> \
                                    </div> \
                                </div> \
                                <div class="modal-footer ng-scope"> \
                                    <button class="btn btn-default" type="button" onclick="confirmSchedule(\'' + TaskID + '\')">确定</button> \
                                    <button class="btn btn-default" type="button" onclick="cancel()">取消</button> \
                                </div> \
                            </div> \
                        </div>';
            $(dialog).appendTo('.modal').show();
            $('.modal').show();
            // 设置默认选中
            if (StartTimeString !== '--:--') {
                var splitArray = StartTimeString.split(':');
                var splitHour = splitArray[0];
                var splitMinute = splitArray[1];
                $('#scheduleHour option[label="' + splitHour + '"]').attr("selected", true);
                $('#scheduleMinute option[label="' + splitMinute + '"]').attr("selected", true);
            }
            // 获得提醒偏移量时间
            var labelList = ['开始时', '开始前10分钟', '开始前20分钟', '开始前半小时', '开始前1小时', '开始前2小时', '开始前4小时', '开始前8小时', '开始前12小时', '开始前1天', '开始前2天'];
            var offsetList = [0, 10, 20, 30, 60, 120, 240, 480, 720, 1440, 2880];

            $.ajax({
                url: '/Apps/Tiger/GroupCalendar/GetRemindOffset',
                type: 'POST',
                data: {
                    taskId: TaskID
                },
                success: function (result) {
                    if (result.Success == true && result.IsRemind) {
                        var TotalMinutesOffset = result.TotalMinutesOffset;
                        var selectedLabel = labelList[offsetList.indexOf(TotalMinutesOffset)];
                        $('#remindTime option[label="' + selectedLabel + '"]').attr("selected", true);
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            })
        }
        function dateToYMD(date) {
            var d = date.getDate();
            var m = date.getMonth() + 1; //Month from 0 to 11
            var y = date.getFullYear();
            return '' + y + '-' + (m <= 9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
        }
    </script>
</body>
</html>
